<template>
  <div class="contentBox">
    <div class="content">
      <div class="topContent" ref="topContent">
        <div class="topBox" ref="topBox">
          <div class="topLeft">编辑角色权限</div>
          <div class="topRight">
          </div>
        </div>
        <div class="line"></div>
        <div class="formBox">
          <t-form
              ref="form"
              :data="formData"
              :layout="'inline'"
              scroll-to-first-error="smooth"
              @submit="onSubmit"
          >
            <!--            <t-form-item label="机构" name="organ" :label-width="34">-->
            <!--              <t-cascader-->
            <!--                  :options="casOptions"-->
            <!--                  v-model="formData.agencyId"-->
            <!--                  placeholder="请选择机构"-->
            <!--                  :keys="{-->
            <!--                    value: 'agencyId',-->
            <!--                    label: 'agencyName',-->
            <!--                    children: 'children',-->
            <!--                  }"  />-->
            <!--            </t-form-item>-->

            <!--            <t-form-item label="所属系统" name="belong" :label-width="58">-->
            <!--              <t-radio-group v-model="formData.belong">-->
            <!--                <t-radio value="1">CRM后台管理</t-radio>-->
            <!--                <t-radio value="2">DMW座席工作台</t-radio>-->
            <!--              </t-radio-group>-->
            <!--            </t-form-item>-->
            <t-form-item label="角色名称" name="roleName" :label-width="58">
              <t-input v-model="formData.roleName" placeholder="请输入角色名称"></t-input>
            </t-form-item>
            <t-form-item label="角色描述" name="roleDesc" :label-width="58">
              <t-input v-model="formData.roleDesc" placeholder="请输入角色描述"></t-input>
            </t-form-item>
          </t-form>
        </div>
      </div>
      <div class="treeBox">
        <t-tree
            ref="tree"
            v-model="treeState.allChecked"
            :data="treeState.treeData"
            :checkable="treeState.checkedAble"
            :check-strictly="treeState.checkStrictly"
            :value-mode="treeState.valeModel"
            :keys="treeState.treeKeys"
            expand-all
            :label="getLabel"
            @change="onChange"
        >
          <template #operations="{ node }">
            <span class="line" v-if="node.data.isFn"></span>
            <t-space :size="10" v-if="node.data.isFn">
              <t-checkbox value="1" :checked="node.data.status === 1" @change="handleStatus(1, node)">只读</t-checkbox>
              <t-checkbox value="2" :checked="node.data.status === 2" @change="handleStatus(2, node)">读写</t-checkbox>
            </t-space>
          </template>
        </t-tree>
      </div>
      <div class="footerBox">
        <t-button class="back" theme="default" @click="handleBack" variant="outline">
          <template #icon>
            <svg-icon
                :name="'icon-bottomBack'"
                class-name="bottom-svg-icon"
            ></svg-icon>
          </template>
          返回
        </t-button>
        <t-button class="reset">
          <template #icon>
            <svg-icon
                :name="'icon-bottomReset'"
                class-name="bottom-svg-icon"
            ></svg-icon>
          </template>
          重置
        </t-button>
        <t-button class="save" @click="handleSave">
          <template #icon>
            <svg-icon
                :name="'icon-bottomSave'"
                class-name="bottom-svg-icon"
            ></svg-icon>
          </template>
          保存
        </t-button>
      </div>
    </div>
  </div>
</template>

<script lang="jsx" setup>
import {getCurrentInstance, nextTick, onMounted, reactive, onBeforeUnmount, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import {useRouter, useRoute } from "vue-router";
import cache from '@/utils/cache.js'
import {
  roleDetail
} from '@/api/permissionSet/roleManagement.js'

const router = useRouter()
const route = useRoute()
const pageInstance = getCurrentInstance()


// form 表单
const formData = reactive({
  id: '',
  roleName: '',
  menuIdList: [],
  remark: '',
});
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

const casOptions = ref([]) // cascader 数据
// 获取详情信息
const getDetail = () => {
  // 获取角色信息
  roleDetail(cache.getSession('role_d_Id')).then(res => {
    formData.id = cache.getSession('role_d_Id')
    formData.menuIdList = res.data.menuIdList
    formData.remark = res.data.remark
    formData.roleName = res.data.roleName
  }).catch(error => {
    console.log(error)
  })
}
onMounted(() => {
  getDetail()
})

//tree
const treeState = reactive({
  valeModel: 'onlyLeaf', // 可选项：onlyLeaf/parentFirst/all
  checkStrictly: false,
  checkedAble: true,
  treeKeys: {
    value: 'value',
    label: 'label',
    isFn: 'isFn',
    children: 'children',

  },
  treeData:  [
    {
      value: '1',
      label: '1',
      children: [
        {
          value: '1.1',
          label: '1.1',
          children: [
            {
              value: '1.1.1',
              label: '1.1.1',
              children: [
                {
                  value: '1.1.1.1',
                  label: '1.1.1.1',
                  isFn: true,
                  status: 0
                },
                {
                  value: '1.1.1.2',
                  label: '1.1.1.2',
                  isFn: true,
                  status: 0
                },
              ],
            }
          ],
        },
        {
          value: '1.2',
          label: '1.2',
          children: [
            {
              value: '1.2.2',
              label: '1.2.2',
              children: [
                {
                  value: '1.2.2.1',
                  label: '1.2.2.1',
                  isFn: true,
                  status: 0
                },
                {
                  value: '1.2.2.2',
                  label: '1.2.2.2',
                  isFn: true,
                  status: 0
                },
              ],
            }
          ],
        },
      ],
    },
  ],
  allChecked: []
})

const getLabel = (createElement, node) => {
  const { data } = node;
  return data.label
}

const onClick = (context) => {
  console.info('onClick:', context);
  const { node } = context;
  console.info(node.value, 'checked:', node.checked);
}
const onChange = (checked, context) => {
  // pageInstance.proxy.$forceUpdate()
  const { node } = context;

  // 当前是否是权限节点
  setCheckedLabel(node.data, node.checked)
}
// tree 节点与权限节点关联
const setCheckedLabel = (node, checked) => {
  // 当前是否是权限节点
  if(node.isFn ) {
    if(checked) {
      node.status = 0
    } else {
      if(node.status === 0) {
        node.status = 2
      }
    }
  } else {
    node.children.forEach(item => {
      setCheckedLabel(item, checked)
    })
  }
}

// 权限选中
const handleStatus = (value, node) => {
  const { data } = node
  if(data.status === 0 || data.status !== value) {
    data.status = value
    setCheckedTree(data.value, true)
  } else {
    data.status = 0
    setCheckedTree(data.value, false)
  }
}
// 权限选择框与tree节点关联
const setCheckedTree = (value, flag) => {
  console.log(treeState.allChecked.indexOf(value), value)
  if(flag) { // 选中
    if(treeState.allChecked.indexOf(value) === -1) {
      treeState.allChecked.push(value)
    }
  } else { // 取消选中
    if(treeState.allChecked.indexOf(value) !== -1) {
      let index = treeState.allChecked.indexOf(value);
      treeState.allChecked.splice(index, 1)
    }
  }
}

const handleSave = () => {
  console.log(treeState.allChecked)
  const items = pageInstance.refs.tree.getItems(treeState.allChecked);
  console.log(items)
}

onBeforeUnmount(() => {
  // cache.removeSession('role_d_Id')
})
const handleBack = () => {}
</script>

<style lang="scss" scoped>
.contentBox {
  position: relative;
  background-color: #EBECED !important;
  padding: 8px;
  height: 100%;

  .content {
    height: 100%;
    position: relative;
    .topContent {
      overflow: hidden;
      border-radius: 4px;
      background-color: white;
    }
    .topBox {
      height: 65px;
      display: flex;
      padding: 20px 20px 17px 20px;
      background-color: rgba(255, 255, 255, 1);

      .topLeft {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }

      .topRight {
        margin-left: auto;

        :deep(.t-button) {
          width: 77px;
          height: 28px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(30, 117, 254, 1);
          border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
          padding: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }

        .add-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
    .line {
      height: 0;
      opacity: 1;
      background: rgba(204, 204, 204, 1);
      border: 1px solid rgba(239, 242, 245, 1);
      margin: 0 20px;
    }
    .formBox {
      padding: 0 20px 0 20px;
      border-radius: 4px 0 0 0;
      background-color: rgba(255, 255,255, 1);
      :deep(.t-form) {
        padding: 20px 0 20px 0;
        border-radius: 4px 0 0 0;
        .t-form-inline {
          row-gap: 16px !important;
        }
        .t-form__item {
          width: 25%;
          height: 28px;
          margin-right: 0!important;
          padding-right: 10px;
          .t-range-input {
            height: 28px;
          }
          .t-input {
            height: 28px;
          }
          .t-form__label--right {
            text-align: left;
            padding-right: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
          .t-select__wrap {
            .t-input {
              height: 28px;
            }
          }
        }
        .t-form__item:nth-child(4) {
          padding-right: 0;
        }
        .formHandleBox {
          margin-left: auto;
          text-align: right;
          padding-right: 0;
          .t-space {
            margin-left: auto;
            justify-content: center;
            align-items: center;
            .queryBtn {
              border: none;
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(30, 117, 254, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              text-align: center;
            }
            .resetBtn {
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(227, 238, 255, 1);
              border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
              text-align: center;
            }
            .arrowCont {
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                font-size: 12px;
                font-weight: 500;
                color: rgba(138, 138, 138, 1);
              }
              .arrowTD-svg-icon {
                height: 16px;
                width: 16px;
                cursor: pointer;
              }
            }
          }
          .t-form__controls {
            margin-left: 0 !important;
          }
        }
      }
      .upArrow {
        text-align: right;
        height: 20px;
        .arrowTD-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
        }
      }
    }

    .treeBox {
      margin-top: 8px;
      border-radius: 4px;
      background-color: white;
      height: calc(100% - 204px);
      padding: 14px 12px;
      overflow-y: auto;
      :deep(.t-tree) {
        .t-tree__item {
          border: 1px solid rgba(240, 240, 240, 1);
          box-sizing: border-box;
        }
        .t-tree__item:hover {
          background-color: rgba(245, 245, 245, 1);
          .t-checkbox {
            background-color: rgba(245, 245, 245, 1);
            //background-color: red;
          }
        }
        .t-tree__label.t-is-checked {
          background-color: white;
        }
        .t-checkbox__label {
          font-size: 12px;
          font-weight: 400;
          color: rgba(56, 56, 56, 0.9);
        }
        .t-tree__operations {
          margin-left: 0;
          .line {
            width: 0;
            height: 18px;
            border: 0.8px dashed rgba(153, 153, 153, 1);
            margin-left: 18px;
            margin-right: 21px;
          }
          .t-checkbox.t-is-checked .t-checkbox__input {
            background-color: rgba(30, 117, 254, 1);
          }
        }
      }
    }
    .footerBox {
      border-radius: 4px;
      background-color: white;
      position: absolute;
      bottom: 0;
      height: 52px;
      text-align: center;
      line-height: 52px;
      width: 100%;
      :deep(.t-button) {
        height: 28px;
        width: 100px;
        margin: 0 7px;
        font-size: 12px;
        font-weight: 400;
        .bottom-svg-icon {
          display: inline-block;
          height: 16px;
          width: 16px;
          margin-right: 5px;
        }
      }
      .back {
        color: rgba(89, 89, 89, 1);
        border: 0.5px solid rgba(89, 89, 89, 1);
      }
      .reset {
        background: rgba(30, 117, 254, 1);
        color: rgba(255, 255, 255, 1);
        border: none;
      }
      .save {
        background: rgba(30, 117, 254, 1);
        color: rgba(255, 255, 255, 1);
        border: none;
      }
    }
  }
}
</style>
